<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normal.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/home.css"/>
		<link rel="stylesheet" type="text/css" href="css/movie.css"/>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<!--the logo of page-->
				<div class="logo float_left">
					<a href="home.html"><img src="../images/logo.png"/></a>
				</div>
				<!--navigation of page-->
				<nav>
					<ul>
						<!--use sprite image and pseudo elements-->
						<li data-tooltip = 'Comic'><a href="home.html"></a></li>
						<li data-tooltip = 'Movie'><a href="home.html"></a></li>
						<li data-tooltip = 'Video'><a href="home.html"></a></li>
						<li data-tooltip = 'Game'><a href="home.html"></a></li>
						<li data-tooltip = 'Tv'><a href="home.html"></a></li>
						<li data-tooltip = 'More'><a href="home.html"></a></li>
					</ul>
				</nav>
				<!--user account : login or create new account-->
				<ul id="account" class="account float_right">
					<li><img src="../images/p1.png"/></li>
					<li id="login"><a href="">Bug Warm</a></li>
					<li></li>
				</ul>
			</header>
			<div class="movie-store">
				<h1>now in the movie</h1>
				<ul class="movie-store-menu">
					<li>
						<img src="../images/1.jpg"/>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
					</li>
					<li>
						<img src="../images/1.jpg"/>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
					</li>
					<li>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
						<img src="../images/1.jpg"/>
					</li>
					<li>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
						<img src="../images/1.jpg"/>
					</li>
					<li>
						<img src="../images/1.jpg"/>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
					</li>
					<li>
						<img src="../images/1.jpg"/>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
					</li>
					<li>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
						<img src="../images/1.jpg"/>
					</li>
					<li>
						<div class="movie-store-info-detailed">
							<h3 class="movie-title">Guard(2015)</h3>
							<p class="movie-time">80 min</p>
							<p class="movie-types">
								<a href="">Contray</a>
								<a href="">Dolor sit</a>
								<a href="">Drama</a>
							</p>
							<p class="icon-info star"><i></i>2550</p>
							<p class="icon-info download"><i></i>520</p>
							<p class="rating-box">Rating : <span class="rating"></span></p>
						</div>
						<img src="../images/1.jpg"/>
					</li>
				</ul>
				<ul class="mpage-movie-list">
					<li>
						 <div class="section">
							<img src="../images/pic1.jpg"/>
							<div class="info-basic" data-movieName = 'Guardians'>
								<p class=""><i></i>3666</p>
								<input class="download" type="button" name="download" id="download" value="" />
							</div>
						</div>
					</li>
					<li>
						 <div class="section">
							<img src="../images/pic1.jpg"/>
							<div class="info-basic" data-movieName = 'Guardians'>
								<p class=""><i></i>3666</p>
								<input class="download" type="button" name="download" id="download" value="" />
							</div>
						</div>
					</li>
					<li>
						 <div class="section">
							<img src="../images/pic1.jpg"/>
							<div class="info-basic" data-movieName = 'Guardians'>
								<p class=""><i></i>3666</p>
								<input class="download" type="button" name="download" id="download" value="" />
							</div>
						</div>
					</li>
				</ul>
				<div id="scroll-list">
					<ul class="scroll-img-list top">
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
					</ul>
					<ul class="scroll-img-list bottom">
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="-title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
						<li>
							<img src="../images/2.jpg"/>
							<div class="scroll-img-info">
								<a class="title" href="">glaex</a>
								<time class="time"></time>
							</div>
						</li>
					</ul>
				</div>
				
				
			</div>
			<footer>
				<div class="footer-decoration">
					<div class = 'decoration'></div>
				</div>
				<div id="footer_info">
					<div id="store_info" class="float_left">
						<img src="images/f_logo.png"/>
						<p>It is a long established fact that a reader will be distracted 
							by the readable content of a page.There are many variations of
							passages of Lorem Ipsum available, but the majority have suffered.</p>
					</div>
					<ul id="store_list" >
						<li>
							<h3>Categories</h3>
							<a href="">Dance</a>
							<a href="">History</a>
							<a href="">War</a>
						</li>
						<li>
							<h3>information</h3>
							<a href="">New products</a>
							<a href="">Top sellers</a>
							<a href="">Specials</a>
						</li>
						<li>
							<h3>Follow Us</h3>
							<a href="">Facebook</a>
							<a href="">Twitter</a>
							<a href="">Youtube</a>
							<p>@ 2017 Template by <span><a class="warning" href="">HuyaEr</a></span></p>
						</li>
					</ul>
				</div>
			</footer>
		</div>
		<script src="js/js.main.js"></script>
		<script src="js/js.normal.js"></script>
	</body>
</html>
